<template>
  <div class="app-container">
    <el-form v-show="showSearch" ref="queryForm" :model="queryParams" size="small" inline>
      <el-form-item :label="$t('Name')" prop="name">
        <el-input v-model="queryParams.name" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">
          {{ $t("Search") }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{
          $t("Reset")
        }}</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">{{ $t("Add") }}</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="queryPage"></right-toolbar>
    </el-row>

    <el-table ref="table" v-loading="loading" :data="list">
      <el-table-column label="#" type="index" width="45" align="right">
        <template slot-scope="scope">
          <span>{{
            (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1
          }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('Name')" align="left" prop="name" min-width="150" />
      <el-table-column :label="$t('Code')" align="left" prop="code" width="280" />
      <el-table-column label="版本名" align="left" prop="version" width="150" />
      <el-table-column label="版本号" align="left" prop="number" width="150" />
      <!-- <el-table-column :label="$t('Url')" align="left" prop="url" width="150" /> -->
      <el-table-column :label="$t('Description')" align="left" prop="description" min-width="150" />
      <el-table-column :label="$t('CreateTime')" align="left" prop="createTime" width="160" />
      <el-table-column :label="$t('UpdateTime')" align="left" prop="updateTime" width="160" />
      <el-table-column :label="$t('Operate')" align="center" width="120" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button size="mini" type="text" @click="handleUpdate(row)">{{ $t('Update') }}
          </el-button>
          <el-button size="mini" type="text" @click="handleDelete(row)">{{ $t('Delete') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="queryPage" />

    <el-dialog title="软件版本更新" :visible.sync="formVisible" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="120px">
        <el-form-item prop="url">
          <el-upload :limit="1" :file-list="fileList" :headers="upload.headers" :action="upload.url"
            :on-success="uploadSuccess" :on-error="uploadError" auto-upload drag>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              {{ $t("DragFileHere") }}<em>{{ $t("ClickAndUpload") }}</em>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item :label="$t('Name')" prop="name">
          <el-input v-model="form.name" :placeholder="$t('device.InsertName')" />
        </el-form-item>
        <el-form-item :label="$t('Code')" prop="code">
          <el-input v-model="form.code" :placeholder="$t('device.InsertCode')"
            :disabled="form.id !== undefined && form.id !== null" />
        </el-form-item>
        <el-form-item label="版本名" prop="version">
          <el-input v-model="form.version" />
        </el-form-item>
        <el-form-item label="版本号" prop="number">
          <el-input-number v-model="form.number" />
        </el-form-item>
        <el-form-item :label="$t('Description')" prop="description">
          <el-input type="textarea" v-model="form.description" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="formSubmit">{{ $t("OK") }}</el-button>
        <el-button @click="formCancel">{{ $t("Cancel") }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import DataEntity from "@/components/DataEntity/DataEntity";
  import applicationAPI from '@/api/app/app'
  import {
    getToken
  } from "@/utils/auth";
  import settings from '@/settings'
  export default {
    name: 'AppLicensePage',
    mixins: [DataEntity],
    data() {
      return {
        statusText: ['未注册', '已注册'],
        currentAPI: applicationAPI,
        currentBaseURL: '/app/app',
        currentCode: 'app',
        queryParams: {
          name: null,
          version: null
        },
        defaultForm: {
          name: null,
          code: null,
          version: null,
          number: null,
          url: null,
          description: null,
        },
        fileList: [],
        rules: {
          url: [{
            required: true,
            message: '请上传App文件'
          }],
          name: [{
            required: true
          }, {
            min: 3,
            max: 45
          }],
          code: [{
            required: true
          }, {
            min: 3,
            max: 45
          }],
          version: [{
            required: true
          }, {
            min: 3,
            max: 45
          }],
          number: [{
            required: true
          }]
        },
        upload: {
          // 是否禁用上传
          isUploading: false,
          // 是否更新已经存在的用户数据
          updateSupport: 0,
          // 设置上传的请求头部
          headers: {
            Authorization: "Bearer " + getToken(),
            'language': this.$i18n.locale
          },
          // 上传的地址
          url: `${settings.baseUrl}/common/upload`,
        }
      }
    },
    methods: {
      handleAdd() {
        this.formVisible = true;
        this.title = this.$t("Create");
        this.form = Object.assign({}, this.defaultForm);
      },
      handleUpdate(row) {
        this.formVisible = true;
        this.title = this.$t("Modify");
        this.form = Object.assign({}, row)
        this.fileList = []
      },
      uploadSuccess(res) {
        this.form.url = settings.baseUrl + res.fileName
        console.log(res)
      },
      uploadError() {
        this.form.url = null
      }
    }
  }

</script>
